<template>
	<view class="navbar-wrapper" :style="{
		paddingTop: statusBarHeight,
		paddingRight: rightSafeArea,
		backgroundColor: navbarBackgroundColor
	}">
		<view class="custom-navbar">
			<view class="navbar-outofright">
				<view class="cs-icon">
					<image src="/static/logo.png" class="logo-icon" />
				</view>
				<view class="search-box">
					<view class="search-input-wrapper">
						<image src="/static/sousuo.png" class="search-icon" />
						<input type="text" placeholder="搜索..." class="search-input" />
					</view>
				</view>
				<view class="notification-icon">
					<image src="/static/lingdang1.png" class="bell-icon" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                isSearch: false,
                // 像素单位
                pxUnit: 'px',
                // 默认状态栏高度
                statusBarHeight: 'var(--status-bar-height)',
                // 微信小程序右上角的胶囊菜单宽度
                rightSafeArea: 0
            }
        },
        created() {
            const px = this.pxUnit
            // #ifndef H5
            // 获取窗口信息
            const windowInfo = uni.getWindowInfo()
            this.statusBarHeight = windowInfo.statusBarHeight + px
            // #endif
         
            // #ifdef MP-WEIXIN
            // 获取胶囊左边界坐标
            const { left } = uni.getMenuButtonBoundingClientRect()
            // 计算胶囊(包括右边距)占据屏幕的总宽度：屏幕宽度-胶囊左边界坐标
            this.rightSafeArea = windowInfo.windowWidth - left + px
            // #endif
        },
    }
</script>

<style lang="scss" scoped>
.navbar-wrapper {
	/**
	 * 元素的宽度和高度包括了内边距(padding)和边框(border)，
	 * 而不会被它们所占据的空间所影响
	 * 子元素继承宽度时,只会继承内容区域的宽度 
	 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.4);
	// backdrop-filter: blur(10px);
	// border-bottom: 1px solid rgba(240, 240, 240, 0.3);
}

.custom-navbar {
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	padding-bottom: 10px;
	box-sizing: border-box;

	.navbar-outofright {
		height: 100%;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.search-box {
		flex: 1;
		
		.search-input-wrapper {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			height: 30px;
			border: 1px solid #e0e0e0;
			border-radius: 20px;
			background-color: #f8f8f8;
			padding: 0 15px;
			box-sizing: border-box;
			
			.search-icon {
				width: 20px;
				height: 20px;
				margin-right: 8px;
				flex-shrink: 0;
			}
			
			.search-input {
				flex: 1;
				height: 100%;
				border: none;
				outline: none;
				background: transparent;
				font-size: 14px;
				color: #333;
				
				&::placeholder {
					color: #999;
				}
			}
		}
	}
	
	.notification-icon {
		width: 25px;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.bell-icon {
			width: 22.5px;
			height: 22.5px;
		}
	}

	.cs-icon {
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.logo-icon {
			width: 45px;
			height: 40px;
		}
	}
}
</style>